I'm recently learning chrome extension development, and find out that: When I use
import { foo } from "./index"
in background.js, I will get an error: An unknown error occurred when fetching the script.,
while using
import { foo } from "./index.js"
Everything just works properly. Could someone please tell me the difference between these two ways?
ES6 needs you to reference a file for it to fetch.
Extension-less or a directory to use index from are supported by external loaders such as webpack, with correct configurations.
With these, if you import without extension, it will look for an index.js inside your import path as if it were a folder.
Or If you have a folder foo, and inside it a file index.js, you can import ./foo without the extension and it will import the index file.
Directly in ES6 as far as I'm aware (e.g. for Chrome browser direct interpretation without some loader), I believe a full file path is necessary for local imports, so you should include the .js extension when you want to import a specific file.